<template>
	<div
		class="up-match-time"
		:style="{
			marginRight
		}">
		{{ showTime }}
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onUnmounted } from 'vue'
import { dateFormat, getRelativeDateArr, t } from '@/utils'
import { SportsType, GAME_PARTS } from '@/enums'

const props = defineProps({
	time: {
		type: String,
		required: true
	},
	isLive: {
		type: Boolean,
		default: false
	},
	showRelative: {
		type: Boolean,
		default: false
	},
	showDate: {
		type: Boolean,
		default: false
	},
	liveGameState: {
		type: Object as any
	},
	sportId: {
		type: String
	},
	isResult: {
		type: Boolean,
		default: false
	},
	isFeeds: {
		type: Boolean,
		default: false
	}
})

const currTime = ref(new Date())

const marginRight = computed(() => {
	let res = '0'
	// eslint-disable-next-line quotes
	if (!showTime.value.endsWith("'")) {
		res = '3px'
	}
	return res
})

const getBasketballTime = () => {
	const { gamePart, gameTime, gameTimeBFFGotAt, clockRunning } = props.liveGameState
	let res = ''
	if (
		[
			GAME_PARTS.FirstQuarter,
			GAME_PARTS.SecondQuarter,
			GAME_PARTS.ThirdQuarter,
			GAME_PARTS.FourthQuarter,
			GAME_PARTS.FirstHalf,
			GAME_PARTS.SecondHalf,
			GAME_PARTS.Overtime
		].includes(gamePart)
	) {
		const intevalTime =
			gameTimeBFFGotAt && clockRunning ? Math.floor((Date.now() - gameTimeBFFGotAt) / 1000) : 0
		const adjustTime = Math.max(gameTime - intevalTime, 0)
		const minute = Math.floor(adjustTime / 60)
		const second = adjustTime % 60
		res = ` ${minute}:${second.toString().padStart(2, '0')}`
	}
	return res
}

const getFootballTime = () => {
	const { gamePart, gameTime, gameTimeBFFGotAt, clockRunning } = props.liveGameState
	let res = ''
	if (
		[
			GAME_PARTS.FirstHalf,
			GAME_PARTS.SecondHalf,
			GAME_PARTS.FirstOvertime,
			GAME_PARTS.SecondOvertime
		].includes(gamePart)
	) {
		const intevalTime =
			gameTimeBFFGotAt && clockRunning ? Math.floor((Date.now() - gameTimeBFFGotAt) / 1000) : 0
		const adjustTime = gameTime + intevalTime
		const minute = Math.floor(adjustTime / 60)
		res = ` ${minute}${Math.floor(currTime.value.valueOf() / 1000) % 2 === 0 ? ' ' : `'`}`
	}
	return res
}

const showTime = computed(() => {
	if (!props.time) {
		return ''
	}
	const date = new Date(props.time).valueOf()
	const { d, h, m, sign } = getRelativeDateArr(date, currTime.value.valueOf())
	if (props.isLive) {
		if (props.liveGameState) {
			const { gamePart } = props.liveGameState
			if (gamePart != null) {
				const partText = t('matchLivePart.' + gamePart)
				switch (props.sportId) {
					case SportsType.football:
					case SportsType.fifa24:
						return partText + getFootballTime()
					case SportsType.basketball:
					case SportsType.nba2k:
						return partText + getBasketballTime()
					case SportsType.badminton:
					case SportsType.tennis:
						return `${partText}`
				}
			}
		}
		if (date <= Date.now() && !props.liveGameState?.gamePart) {
			return t('match.preparing')
		}
		return h ? `${h}h ${m}m` : `${m}m`
	} else if (props.showRelative) {
		if (props.isFeeds && !props.isResult && date <= Date.now()) {
			return ''
		}
		return (d ? `${d}d` : h ? `${h}h` : `${m}m`) + (sign ? ' ' + t('match.ago') : '')
	} else {
		if (date <= Date.now()) {
			return t('match.preparing')
		}
		const fmt = props.showDate ? 'D/MM h:mm A' : 'h:mm A'
		return dateFormat(props.time, fmt)
	}
})

let timer: any = null

const onTimer = () => {
	timer = setTimeout(() => {
		currTime.value = new Date()
		onTimer()
	}, 1000)
}

onUnmounted(() => {
	timer && clearTimeout(timer)
})

onTimer()
</script>
